<template>
  <view class="page-content-box">

    <!-- 选店 -->
    <!-- <view class="select-shop">
      <navigator url="/pages/shopSeclect/shopSeclect" hover-class="none" style="display: flex;justify-content: flex-start;align-items: center;">
        <text class="select-icon"></text>
        <text class="tab-shop-name">{{desk_name}}</text>
      </navigator>
    </view> -->

    <!-- banner -->
    <scroll-view scroll-y @scrolltolower="loadingMore" style="height: 100%;">
      <view class="index-banner-top">
        <swiper :indicator-dots="indicatorShow" indicator-active-color="#fff" autoplay="true" interval="5000"
                class="banner-swiper">
          <block v-for="(item,index) in banner_list" :key="index">
            <swiper-item>
              <image class="swiper-item-image" mode="aspectFill" :src="item.image_url"
                     @click="goToActivity(item.page)"></image>
            </swiper-item>
          </block>
        </swiper>
      </view>

      <!-- 通知 -->
      <!-- <view v-if="msg_list.length>0" class="notice-box">
        <swiper class="swiper-notice" vertical="true" autoplay="true" circular="true" interval="2000">
            <block v-for="(item,index) in msg_list" :key="index">
                <navigator :url="'/pages/notice/notice?id='+item.id+''" hover-class="none">
              <swiper-item>
                <view class="notice-content txt-ellipsis">

                  <image style="width: 50rpx; height: 50rpx;vertical-align: middle;margin-right: 12rpx;margin-top: -4rpx;" mode="aspectFit" src="https://parking.htfa.cn/parking/images/gonggao.png"></image>

                  <text>{{item.title}}</text>
                </view>
              </swiper-item>
            </navigator>
          </block>
        </swiper>
      </view> -->

      <!-- 金刚区 -->
      <view class="nav-bar">
        <view class="nav-box" v-for="(item) in nav_boxs" :key="item.id" @click="toDetail(item)">
          <view class="nav-icon-wrapper">
            <image :src="item.image_url" mode="aspectFit"></image>
          </view>
          <text class="nav-text">{{ item.name }}</text>
        </view>
      </view>

      <!--顶部导航栏-->
      <view v-if="tabBars.length>0" class="index-tab-bar bg-w">
        <scroll-view scroll-x class="uni-swiper-tab">
          <block v-for="(item,index) in tabBars" :key="index">
            <view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
              {{ item.name }}
            </view>
          </block>
        </scroll-view>
      </view>

      <!-- 商品列表 -->

      <!-- 	<view class="index-tab-content" :style="goods_list.length>0?'height: '+((Math.ceil(goods_list.length/2))*520)+'rpx;':'height:calc(100% - 410rpx)'">

          <swiper :current="tabIndex" @change="tabChange" @animationfinish="tabAnimation" class="index-swiper" :circular="true">
            <swiper-item v-for="(item,index) in tabBars" :key="index" class="index-swiper-item">
              <view style="height: 100%;">
                <view class="more-list-content">
                  <view v-if="goods_list.length==0&&hasload" class="no-data-box">
                    <image mode="aspectFit" src="http://testparking.htfa.cn:9098/wushuju.png"></image>
                    <view>暂无数据~</view>
                  </view>
                  <view class="goods-list-content">
                    <block v-for="(item,index) in goods_list" :key="index">
                      <view class="goods-list">
                        <navigator :url="'/pages/goodsdetail/goodsdetail?sku_number='+item.sku_number" hover-class="none">
                          <view class="good-img">
                            <image style="width: 300rpx; height: 240rpx;border-radius: 20rpx;" mode="aspectFill" :src="baseUrl + item.image_url_s"></image>
                          </view>
                          <view :class="index<3?'name txt-ellipsis img-name':'name txt-ellipsis'">
                            <image v-if="index<3" style="width: 64rpx; height: 30rpx;vertical-align: middle;margin-right: 14rpx;" mode="aspectFit" src="../../static/tuijian.png"></image>
                            <text>{{item.name}}</text>
                          </view>
                          <view class="des txt-ellipsis-2">
                            {{item.intro}}
                          </view>
                          <view>
                            <text class="new-cost" style="margin-right: 10rpx;">￥{{item.sale_price}} </text> <text class="old-cost"> ￥{{item.origin_price}}</text>
                          </view>
                          <button plain="true" @click.stop="$base.addToCart" :data-idx="item.sku_id"  class="cart-btn">
                            <image style="width: 50rpx; height: 44rpx;" mode="aspectFit" src="../../static/add.png"></image>
                          </button>
                          <view v-if="item.discounts_deduction>0" class="tab-monney">下单立减￥{{item.discounts_deduction}}</view>
                        </navigator>
                      </view>
                    </block>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view v-if="ishide" class="loader" style="padding-top: 0;">
          <view class="loader-inner ball-pulse">
            <view></view>
            <view></view>
            <view></view>
          </view>
        </view>

        <view v-if="noMore" class="loading-more-text">暂无更多数据</view> -->

      <toast></toast>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banner_list: [
        {
          id: 0,
          image_url: 'https://parking.htfa.cn/parking/images/banner/banner3.png',
          page: ''
        },
        /*{
          id: 1,
          image_url: 'https://parking.htfa.cn/parking/images/banner/banner1.jpg',
          page: '/parking/parkingExtension/parkingExtension'
        },
        {
          id: 2,
          image_url: 'https://parking.htfa.cn/parking/images/banner/banner2.jpg',
          page: '/pages/maintenance/maintenance'
        }*/
      ],
      nav_boxs: [
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon4.png',
          // image_url:'https://parking.htfa.cn/parking/images/myself1.png',
          name: '停车延期申请',
          url: '/parking/parkingExtension/parkingExtension',
          id: 1
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon3.png',
          // image_url:'https://parking.htfa.cn/parking/images/dingzhi2.png',
          name: '延期申请记录',
          url: '/pages/orderlist/orderlist',
          id: 2
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon1.png',
          name: '分公司车场预约',
          url: 'https://tiaozhuan2.htfa.cn/bResource/static/H5/#/login',
          id: 3
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon1.png',
          name: '研究院/西部大楼车场预约',
          url: 'https://tiaozhuan.htfa.cn/bResource/static/H5/#/login',
          id: 4
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon5.png',
          name: '物业报修',
          url: '/pages/maintenance/maintenance',
          id: 5
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon6.png',
          name: '物业报修记录',
          url: '/pages/maintenanceList/maintenanceList',
          id: 6
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon7.png',
          name: '意见反馈',
          url: '/pages/feedback/feedback',
          id: 7
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon8.png',
          name: '访客邀约',
          url: '',
          id: 8
        },
        {
          image_url: 'https://parking.htfa.cn/parking/images/icon/icon9.png',
          name: '车位查询',
          url: '',
          id: 9
        },
        // {
        // 	image_url:'http://testparking.htfa.cn:9098/myself2.png',
        // 	name:'个人信息',
        // 	url:'/pages/personal/personal',
        // 	id:2
        // },
        // {
        // 	image_url:'http://testparking.htfa.cn:9098/gouwuche2.png',
        // 	name:'生活缴费',
        // 	url:'/pages/personal/personal',
        // 	id:4
        // },


      ],
      tabIndex: 0,	//选中标签栏的序列
      indicatorShow: false,
      tabBars: [],
      tabLoad: false,
      goods_list: [],
      baseUrl: this.$client.IMG_URL,
      ishide: false,
      noMore: false,
      hasload: false,
      pager: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      company_name: '',
      activityShow: false,
      prize_code: '',
      msg_list: [
        {
          id: 1,
          title: '周年庆活动通知'
        },
        {
          id: 2,
          title: '接待通知'
        },
        {
          id: 3,
          title: '台风注意防范事项'
        }
      ],
      desk_number: '',
      desk_name: ''
    }
  },
  onLoad(options) {

    this.pager.page = 1;
    this.goods_list = [];
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#70dbff'
    })

    //desk_number
    this.desk_number = uni.getStorageSync('deskNumber');
    if (this.desk_number == '') {
      uni.navigateTo({
        url: '/pages/shopSeclect/shopSeclect',
      })
    }

  },
  onShow() {
    this.getDeskNumber();
    this.pager.page = 1;
    this.goods_list = [];
    this.tabBars = [];
    if (this.tabBars.length > 0) {
      this.getInitData(this.tabBars[this.tabIndex].id);
    } else {
      this.getChannelList();
    }
    //this.getNoticeList();
  },
  methods: {
    getChannelList() {
      var _this = this;
      var params = {
        desk_number: _this.desk_number
      }
      if (_this.desk_number != '') {
        this.$client.get('/api/index/getproductchannellist', params, function (res, message) {
          _this.tabBars = res.channel_list;
          _this.getInitData(_this.tabBars[_this.tabIndex].id);
        }, function (res) {

        });
      }


      // this.$client.get('/api/index/getproductchannellist', params, function(res,message){
      // 	_this.tabBars = res.channel_list;
      // 	_this.getInitData(_this.tabBars[_this.tabIndex].id);
      // },function(res){

      // });
    },
    getInitData(status) {
      // console.log(1212);
      var _this = this;
      this.noMore = false;
      if (_this.pager.page == 1) {
        _this.$loading();
      } else {
        _this.ishide = true;
      }
      this.hasload = false;
      var params = {
        channel_id: status,
        p: _this.pager.page,
        pageSize: _this.pager.pageSize,
        desk_number: _this.desk_number
      }
      this.$client.get('/api/index/index', params, function (res, message) {

        _this.hasload = true;
        if (_this.pager.page == 1) {
          _this.$loading(false);
        } else {
          setTimeout(() => {
            _this.ishide = false;
          }, 1000)
        }
        _this.goods_list = _this.goods_list.concat(res.list);
        _this.tabBars = res.channel_list;
        _this.banner_list = res.banner_list;
        _this.nav_boxs = res.nav_boxs;
        _this.indicatorShow = _this.banner_list.length > 1 ? true : false;
        _this.pager = res.pager;
      }, function (res) {
        _this.hasload = true;
        if (_this.pager.page == 1) {
          _this.$loading(false);
        } else {
          setTimeout(() => {
            _this.ishide = false;
          }, 1000)
        }
      });
    },
    getDeskNumber() {
      this.desk_number = uni.getStorageSync('deskNumber');
      this.desk_name = uni.getStorageSync('deskName');
    },
    getNoticeList() {
      var _this = this;
      this.$client.get('/api/notice/list', {}, function (res, message) {
        _this.msg_list = res.list;
      }, function (res) {

      });
    },
    toggleTab(index) {
      //console.log(index);
      //console.log(id);
      this.tabIndex = index;
    },
    //滑动切换swiper
    tabChange(e) {
      //console.log(e.detail)
      this.pager.page = 1;
      this.goods_list = [];
      this.hasload = false;
      this.$loading();
      const tabIndex = e.detail.current;
      this.tabIndex = tabIndex;
      this.tabLoad = true;
      /* uni.setNavigationBarTitle({
          title: this.tabBars[tabIndex].name
      }); */
    },
    toDetail(item) {
      var _this = this;
      if (item.url) {
        if (item.url.startsWith('http://') || item.url.startsWith('https://')) {
          uni.navigateTo({
            url: '/pages/webview/webview?url=' + encodeURIComponent(item.url)
          })
        } else {
          uni.navigateTo({
            url: item.url
          })
        }
      } else {
        _this.$util.showToast({title:'正在开发中，敬请期待！'});
      }
    },
    tabAnimation(e) {
      if (this.tabLoad) {
        const tabIndex = e.detail.current;
        this.$loading(false);
        //this.getInitData(this.tabBars[tabIndex].id);
        this.tabLoad = false;
      }
    },
    loadingMore() {
      if (this.goods_list.length >= this.pager.total) {
        /* this.ishide = true;
        setTimeout(()=>{
          this.ishide = false;
          this.$util.showToast({title:'已经加载全部了'});
        },1500) */
        this.noMore = true;
      } else {
        this.pager.page++;
        //this.getInitData(this.tabBars[this.tabIndex].id);
      }
    },
    goToActivity(url) {
      if (url) {
        uni.navigateTo({
          url: url,
        })
      }
    },

    // scanCompany(){
    // 	var _this = this;
    // 	if(!(uni.getStorageSync("key")&&uni.getStorageSync("secret"))) {
    // 		uni.navigateTo({
    // 		    url: "/pages/login/login"
    // 		});
    // 		return;
    // 	}
    // 	uni.scanCode({
    // 	    onlyFromCamera: true,
    // 	    success: function (res) {
    // 	        //console.log('条码类型：' + res.scanType);
    // 	        //console.log('条码内容：' + res.result);
    // 			//console.log(id);
    // 			uni.showLoading({
    // 			    title: '加载中...'
    // 			});
    // 			_this.$client.post('/api/user/binddesknumber', {desk_number:res.result}, function(res,message){
    // 				//console.log(res);
    // 				uni.hideLoading();
    // 				_this.$util.showToast({title:message});
    // 				uni.setStorageSync('companyName',res.name);
    // 				_this.company_name = res.name;
    // 			},function(res){
    // 				uni.hideLoading();
    // 				if(res){
    // 					_this.$util.showToast({title:res});
    // 				}
    // 			},true);
    // 	    }
    // 	});
    // },
    // getCodeData(){
    // 	var _this = this;
    // 	this.$client.get('/api/prizeuser/getcode', {}, function(res,message){
    // 		_this.prize_code = res.prize_code;
    // 		if(res.first==1){
    // 			_this.activityShow = true;
    // 		}else{
    // 			_this.activityShow = false;
    // 		}
    // 	},function(res){

    // 	},true);
    // },
    /* loadRefresh(){
      this.pager.page = 1;
      this.goods_list = [];
      this.loadfresh = true;
      this.getInitData(this.tabBars[this.tabIndex].id);
    }, */
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.$client.AppName,
      path: '/pages/index/index'
    }
  },
  onShareTimeline() {
    return {
      title: this.$client.AppName,
      query: '',
    }
  },
  onPullDownRefresh() {
    this.pager.page = 1;
    this.goods_list = [];
    //this.getInitData(this.tabBars[this.tabIndex].id);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  /* onReachBottom(){
    if(this.goods_list.length>=this.pager.total){
      this.noMore = true;
    }else{
      this.pager.page++;
      this.getInitData(this.tabBars[this.tabIndex].id);
    }
  } */
}
</script>

<style>
.page-content-box .select-shop {
  width: 100%;
  background-color: rgba(253, 166, 0, 1.0);
}

.page-content-box .select-shop .select-icon {
  width: 48rpx;
  height: 48rpx;
  background-image: url(https://parking.htfa.cn/parking/images/xiala.png);
  background-size: 48rpx 48rpx;
  margin-left: 12rpx;
}

.page-content-box .select-shop .tab-shop-name {
  font-size: 30rpx;
  color: #FFF5F2;
  font-weight: 700;
}

.dlg-activity {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  position: fixed;
  left: 0;
  top: 0;
}

.act-content {
  width: 500rpx;
  height: 540rpx;
  background: linear-gradient(0deg, #FFD155, #FFB142);
  box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(212, 96, 96, 0.5);
  border-radius: 20rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250rpx;
  margin-top: -300rpx;
}

.act-content .img-box {
  width: 424rpx;
  height: 200rpx;
  position: absolute;
  left: 25rpx;
  top: -138rpx;
}

.act-content .success-box {
  height: 53rpx;
  text-align: center;
  margin: 94rpx 0 30rpx 0;
}

.act-content .number-box {
  width: 460rpx;
  height: 200rpx;
  background: #FFFAE4;
  border-radius: 20rpx;
  margin: 0 20rpx;
  padding: 20rpx 0;
  box-sizing: border-box;
}

.act-content .number-box .tips {
  font-size: 30rpx;
  color: #161616;
  text-align: center;
  line-height: 70rpx;
}

.act-content .number-box .number {
  font-size: 50rpx;
  color: #FF0004;
  text-align: center;
}

.act-content .act-btn-box {
  text-align: center;
  padding-top: 40rpx;
}

.act-content .act-btn-box .act-btn {
  width: 300rpx;
  height: 80rpx;
  background: linear-gradient(0deg, #FF8459, #E71010);
  box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(212, 96, 96, 0.5);
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #FFF6A6;
}

.act-content .dlg-close {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  left: 50%;
  bottom: -84rpx;
  margin-left: -30rpx;
}


.page-content-box {
  height: 100%;
  background: linear-gradient(to top, #d8fcfc, #fffaec);
}

.banner-swiper {
  height: 340rpx;
  border-radius: 20rpx;
  transform: translateY(0);
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(18, 157, 232, 0.15);
}

.index-banner-top {
  width: 100%;
  padding: 25rpx 20rpx;
  box-sizing: border-box;
  background: #70dbff;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
}

.index-banner-top .index-top-content {
  height: 60rpx;
}

.index-banner-top .company-box {
  width: calc(100% - 80rpx);
  height: 60rpx;
  line-height: 46rpx;
  /* background-color: rgba(253, 166, 0, 1.0); */
}

.index-banner-top .scan-box {
  width: 80rpx;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}

.index-banner-top .company-box text {
  color: #fff;
}

.uni-swiper-tab {
  border-bottom: none;
  height: 100rpx;
  line-height: 100rpx;
  margin-top: 10rpx;
}

.swiper-tab-list {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
}

.swiper-tab-list.active {
  font-size: 34rpx;
  font-weight: bold;
  color: rgba(22, 22, 22, 1);
  position: relative;
  z-index: 5;
}

.swiper-tab-list.active::before {
  content: '';
  width: 108rpx;
  height: 18rpx;
  display: block;
  background: url(../../static/zhuangshi.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  margin-left: -54rpx;
  bottom: 10rpx;
  z-index: -1;
}

.index-tab-content {
  min-height: calc(100% - 410rpx);
  background-color: #fff;
}

.index-swiper, .index-swiper-item {
  height: 100%;
}

.notice-box {
  margin-top: 20rpx;
  padding: 20rpx 20rpx 20rpx 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.swiper-notice {
  height: 60rpx;
  width: 100%;
}

.swiper-notice .navigator {
  height: 60rpx;
}

.swiper-item-image {
  height: 340rpx;
  width: 710rpx;
  border-radius: 20rpx;
}

.notice-content {
  height: 80rpx;
  line-height: 80rpx;
  letter-spacing: 4rpx;
  background: #FAF8F7;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #129de8;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 30rpx;
}

/* .join-us-box{
  padding: 0 20rpx;
  box-sizing: border-box;
}
.join-us-box .join-title{
  font-size: 34rpx;
  font-weight: bold;
  color: #151515;
  line-height: 100rpx;
  height: 100rpx;
  box-sizing: border-box;
}
.join-content{
  justify-content: space-between;
}
.join-us-box .join-item{
  width: 344rpx;
  height: 140rpx;
  background: linear-gradient(90deg, #FCE7DD, #FFF4EF);
  border-radius: 20rpx;
}
.join-us-box .order-join{
  background: linear-gradient(90deg, #D6DEF7, #F4F6FF);
}
.join-us-box .join-item navigator{
  width: 344rpx;
  height: 140rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background:url('../../static/shangjia.png') 8rpx bottom no-repeat;
  background-size: 128rpx 120rpx;
}
.join-us-box .order-join navigator{
  background:url('../../static/qiye.png') 8rpx bottom no-repeat;
  background-size: 128rpx 120rpx;
}
.join-us-box .join-item view{
  text-align: right;
}
.join-us-box .join-item .name{
  font-size: 30rpx;
  font-weight: bold;
  color: #F87335;
  line-height: 60rpx;
}
.join-us-box .order-join .name{
  color: #3D70F9;
}
.join-us-box .join-item .des{
  font-size: 22rpx;
  color: #C56D43;
  line-height: 40rpx;
}
.join-us-box .order-join .des{
  color: #6886D6;
} */
.nav-bar {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 30rpx 20rpx 20rpx 20rpx;
  /*background: linear-gradient(to top, #d8fcfc, #fffaec);*/
  margin: 20rpx;
  border-radius: 24rpx;
  /*box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);*/
}

.nav-box {
  width: 33.33%;
  margin-bottom: 30rpx;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  transition: all 0.3s ease;
}

.nav-icon-wrapper {
  width: 96rpx;
  height: 96rpx;
  background: linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%);
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(18, 157, 232, 0.1);
  transition: all 0.3s ease;
}

.nav-box image {
  height: 56rpx;
  width: 56rpx;
}

.nav-text {
  font-size: 24rpx;
  line-height: 32rpx;
  text-align: center;
  color: #333333;
  font-weight: 500;
  width: 100%;
  padding: 0 10rpx;
  box-sizing: border-box;
  height: 64rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
</style>
